<template>
  <div class="other-type">
    <div class="mb-10px"> 号码: {{ id }} </div>
    <div class="mb-10px" v-for="(item, index) in keyList" :key="index">
      {{ Object.keys(item)[0] }}: {{ Object.values(item)[0] }}
    </div>
    <el-button type="primary" @click="tranClue">转线索</el-button>
    <el-button type="primary" @click="tranCustomer">转客户</el-button>
  </div>
  <ClueForm ref="clueForRef" />
  <CustomerForm ref="customerFormRef" />
</template>

<script setup>
import ClueForm from '@/views/crm/clue/ClueForm.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
import { RecordApi } from '@/api/call/record'

const props = defineProps({
  id: String,
  nowIds: Array
})

const clueForRef = ref(null)
const customerFormRef = ref(null)

const tranClue = () => {
  const name = keyList.value.map((obj) => Object.values(obj)[0]).join('-')
  clueForRef.value.openByEnt('create', props.id, name)
}
const tranCustomer = () => {
  const name = keyList.value.map((obj) => Object.values(obj)[0]).join('-')
  customerFormRef.value.open('create', null, props.id, name)
}

const keyList = ref([])
const getList = async (obj) => {
  const arr = await RecordApi.taskCalleeListNumberRule()
  keyList.value = Object.entries(obj)
    .map(([key, value]) => {
      const found = arr.find((item) => item.extendCode === key)
      return found ? { [found.extendName]: value } : null
    })
    .filter(Boolean)
}

watch(
  () => props.nowIds,
  (val) => {
    if (val) {
      getList(val)
    } else {
      keyList.value = []
    }
  },
  { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.other-type {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
  margin-bottom: 20px;
}
</style>
